<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{
    crumbList?: any[]
    customerList?: any[]
}>(), {
    crumbList: () => [],
    customerList: () => [],
})

// const emits = defineEmits(['update:modelValue', 'change'])

// name: 'root-non-tender',
// path: '/non-tender',
const defList = [{ name: 'root-index', title: '首页' }, { name: 'root-non-tender', title: '招采信息' }]
const list = computed(() => {
    console.log(props.crumbList)
    if (props.customerList && props.customerList.length > 0) {
        return [...props.customerList]
    }
    return [...defList, ...props.crumbList.values()]
})
const { name, path } = useRoute()
const { push } = useRouter()
const breadList = computed(() => {
    console.log(path)

    const index = list.value.findIndex(item => item.name === name)
    console.log(index, name)

    if (index > -1) {
        return list.value.slice(0, index + 1)
    }
    return []
})
function breadClick(routeData) {
    console.log(routeData)
    push({
        name: routeData.name,
    })
}
</script>

<template>
    <el-header>
        <div class="flex">
            <span v-for="(item, index) in breadList"
                  :key="item.name"
                  class="flex items-center"
            >
                <el-link :underline="false"
                         :type="index === breadList.length - 1 ? 'primary' : 'default'"
                         @click="breadClick(item)"
                >
                    {{ item.title }}
                </el-link>

                <el-icon v-if="index < breadList.length - 1"
                         class="ml-10 mr-10"
                ><ArrowRight /></el-icon>

            </span>
        </div>
    </el-header>
</template>

<style scoped>
</style>
